<!-- 布种产量图 -->
<template>
  <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'barChart',
  setup() {
    const chart = ref<HTMLElement | null>(null);
    let myChart: echarts.ECharts | null = null;

    const initChart = () => {
      if (chart.value) {
        myChart = echarts.init(chart.value);

        const option: echarts.EChartsOption = {
          title: {
            text: '',
          },
          tooltip: {},
          xAxis: {
            data: ['shirt', 'cardign', 'chiffon', 'pants', 'heels', 'socks'],
          },
          yAxis: {},
          series: [
            {
              name: 'sales',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };

        myChart.setOption(option);
      }
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

    return {
      chart,
    };
  },
});
</script>

<style></style>